<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
    <style>
        html, body, #mapid { height: 100%;width: 100%; margin: 0;padding: 0;}
    </style>
</head>
<body>
<div id="mapid"></div>
</body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
<script>
    function tiandituLayer(layerType, layerType2, zIndex) {
        var url = 'http://t{s}.tianditu.gov.cn/' + layerType + '/wmts?TileMatrix={z}&TileCol={x}&TileRow={y}';
        url += L.Util.getParamString({
            layer: layerType2,
            style: 'default',
            tilematrixset: 'c',
            service: 'wmts',
            request: 'getTile',
            version: '1.0.0',
            format: 'tiles',
            tk: '3218e1d28ef9e4ecc944b4c58a51c745'
        }, '?');
        return L.tileLayer(url, {
            tileSize: 256,
            zoomOffset: 1,
            subdomains: '01234567',
            pane: 'mapPane',
            zIndex: zIndex
        });
    }

    var mymap = L.map('mapid', {
        center: [42, 122],
        zoom: 1,
        minZoom: 1,
        maxZoom: 18,
        crs: L.CRS.EPSG4326,
        maxBounds: [
            [-90, -Infinity],
            [90, Infinity]
        ],
        inertia: false
    });
    // 地图
    tiandituLayer('ter_c', 'ter', 3).addTo(mymap);
    // 轮廓线
    // tiandituLayer('tbo_c', 'tbo', 4).addTo(mymap);
    // // 地名
    // tiandituLayer('cta_c', 'cta', 5).addTo(mymap);
</script>
</html>